<template>
	<view style='padding-bottom: 20px;'>
		<!-- <mescroll-body  @up="upCallback"> -->
			<view class='box' v-for='(item,index) in list' :key='index'>
				<view class='box-tit'>
						<view >姓名：<span class='box-tit-value'>{{item.appointmentUser}}</span></view>
						<view class='box-btn' v-if='item.appointmentStatus == 1'>已受理</view>
						<view class='box-btn1' v-if='item.appointmentStatus == 0' @click='acceptance(item)'>受理</view>
				</view>
				<view class='lineSty'></view>
				<view class='box-info'>
					<view class='box-info-value'>类型：<span class='box-tit-value'>{{item.type}}</span></view>
					<view class='box-info-value'>电话：<span class='box-tit-value'>{{item.appointmentUserPhone}}</span>
						<image
							@click.stop="callPhone(item.appointmentUserPhone)"
							class="icon-image"
							:src="getImgUrl(item.telephoneIcon)"
							mode=""
						></image>
					</view>
					<view class='box-info-value'>车牌：<span class='box-tit-value'>{{item.carNo}}</span></view>
					<view class='box-info-value'>时间：<span class='box-tit-value'>{{item.time}}</span></view>
					<view class='box-info-value'>门店：<span class='box-tit-value'>{{item.storeName}}</span>
					<image
							@click.stop="navi(item)"
							class="icon-image"
							:src="getImgUrl(item.navigationIcon)"
							mode=""
						></image>
						</view>
					<view style='line-height: 35px;display: flex;'>
						<div style='min-width: 42px;'>地址：</div>
						<div class='box-tit-value' >{{item.storeAddress}}</div>
						
					</view>
					<view style='line-height: 35px;display: flex;'>
						<div style='min-width: 42px;'>描述：</div>
						<div class='box-tit-value' >{{item.description}}</div>
						
					</view>
				</view>
				<button type="primary"  size="mini" class='box-btn4' @click='deletRecord(item)'>删除</button>
			</view>
			
		<!-- </mescroll-body> -->
		<button type="primary" class='box-btn3' @click='goback'>返回</button>
	</view>
</template>

<script>
	import imageload from '../../mixins/imageload.js';
	export default {
		mixins: [imageload],
		data() {
			return {
				list:[],
				pageNo: 1,
			}
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			this.getData();
			uni.stopPullDownRefresh()
		},
		onLoad() {
			this.getData();
		},
		methods: {
			// 上拉加载
			// upCallback(page) {
			// 	console.log("触发了上拉加载" + page);
			
			// 	this.pageNo = page.num;
			// 	this.getData();
			// },
			// 受理
			acceptance(info){
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定受理该条预约？',
					success: function (res) {
						if (res.confirm) {
							that.$u.api.appointmentAcceptance({
								id:info.id
							}).then(
								res => {
									uni.showToast({
										title: '受理成功',
										icon: 'none'
									});
									setTimeout(()=>{
										that.getData()
									}, 1000)
								}
							);
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
				
			},
			// 拨电话
			callPhone(info) {
			    uni.makePhoneCall({
			        phoneNumber: info,
			        success: (res) => {
			           
			        }
			    })
			},
			// 删除记录
			deletRecord(info){
				var that = this
				 uni.showModal({
						title: '提示',
						content: '确定删除该条记录？',
						success: function (res) {
							if (res.confirm) {
								that.$u.api.appointmentRocordRemove({
									id:info.id
								}).then(
									res => {
										uni.showToast({
											title: '删除成功',
											icon: 'none'
										});
										setTimeout(()=>{
											that.getData()
										}, 1000)
									}
								);
							} else if (res.cancel) {
								console.log('取消');
							}
						}
					});
				
			},
			// 返回主页
			goback(){
				uni.switchTab({
				    url: '../work/work'
				});
			},
			// 获取列表数据
			getData() {
				this.$u.api.getAppointmentRocordList({
				}).then(
					res => {
						if(res.length>0){
							let arr = JSON.parse(JSON.stringify(res))
							arr.map((item)=>{
								if(item.type == 1){
									item.type = '常规保养'
								}else if(item.type == 2){
									item.type = '故障维修'
								}else if(item.type == 3){
									item.type = '事故维修'
								}else if(item.type == 4){
									item.type = '退车'
								}
								if(item.type == '事故维修'){
									item.time= item.appointmentStartTime.split(' ')[0]
								}else{
									let endTime = item.appointmentEndTime.split(' ')[1]
									item.time= `${item.appointmentStartTime}-${endTime}`
								}
								
								// item.lat = 34.22259
								// item.lon = 108.94878
							})
							this.list = arr
							
						}
					}
				);
				
			},
			// 导航
			navi(info) {
				
				const qqLatLng = this.bMapToQQMap(info.lat, info.lon);
				
				console.log('点击了导航', qqLatLng);
			    uni.openLocation({ //​使用微信内置地图查看位置。
			        latitude: qqLatLng[0], //要去的纬度-地址
			        longitude: qqLatLng[1], //要去的经度-地址
			        name: info.storeName,
			        address: info.storeAddress,
			        success() {
			            console.log('成功了');
			        },
			        fail(msg) {
			            console.log(msg)
			        }
			    })
			},
			bMapToQQMap(lat, lng) {
				let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
				let x = lng - 0.0065;
				let y = lat - 0.006;
				let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				let lngs = z * Math.cos(theta);
				let lats = z * Math.sin(theta);
				return [lats, lngs]
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	
.box{
		margin:20px;
		background-color: #fff;
		border-radius: 6px;
		position: relative;
	}
	.box-tit{
		height:40px;
		line-height: 40px;
		display: flex;
		justify-content: space-between;
		padding:10px;
		align-items: center;
		font-size: 14px;
	}
	.lineSty{
		width: 95%;
		background-color: #e5e5e5;
		height: 1px;
		margin: 0 auto;
	}
	.box-btn{
		padding: 5px 15px;
		color: #fff;
		border-radius: 15px;
		background-color: #d4dacb;
		height: 15px;
		line-height: 15px;
		font-size: 12px;
	}
	.box-btn1{
		
		padding: 5px 15px;
		color: #fff;
		border-radius: 15px;
		background-color: rgb(237,131,144);
		height: 15px;
		line-height: 15px;
		font-size: 12px;
		cursor: pointer;  
	}
	.box-info{
		padding:10px;
		font-size: 14px;
	}
	.box-info-value{
		
		line-height: 35px;
		display: flex;
		align-items: center;
	}
	.navigation{
		color: blue;
		cursor: pointer;
		margin-left: 20px;
	}
	.icon-image{
		width:20px;
		height:20px;
		margin-left:10px;
	}
	.box-btn3{
		background: #7979de;
		height: 30px;
		line-height: 30px;
		font-size: 16px;
		margin: 20px;
	}
	.box-tit-value{
		color:rgb(139,147,156)
	}
	.box-btn4{
	   position: absolute;
	   right: 10px;
	   bottom: 10px;
	   background: #0606d621;
	   height: 20px;
	   color: #7c7cec;
	   line-height: 20px;
	   border-radius: 20px;
	}

</style>
